<!DOCTYPE html>
<html>
<head>
    <title>Scroll Arena</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 15px;
        }
        h1, h2 {
            border-bottom: 1px solid #ccc;
            padding-bottom: 5px;
            margin-top: 30px;
        }
        .scrollbox {
            border: 1px solid black;
            padding: 10px;
            margin-bottom: 25px; /* Spacing between scrollboxes */
            background-color: #f9f9f9;
            box-sizing: border-box; /* Ensures padding and border are included in width/height */
        }
        .vertical-scroll {
            height: 200px;
            overflow-y: scroll;
        }
        .horizontal-scroll {
            width: 90%; /* Or a fixed width like 500px */
            overflow-x: scroll;
            white-space: nowrap; /* Crucial for horizontal scroll content */
            height: 100px;
            padding-top: 10px; /* Padding for items inside */
            padding-bottom: 10px;
        }
        .horizontal-scroll .hs-item {
            display: inline-block;
            width: 180px;
            height: 70px;
            border: 1px dashed #aaa;
            margin-right: 10px;
            text-align: center;
            vertical-align: middle;
            line-height: 70px; /* Vertically center text */
            background-color: #fff;
        }
        .placeholder-block {
            height: 250px;
            background-color: #e0e0e0;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
            border: 1px dashed #bbb;
            font-style: italic;
            color: #555;
        }
        .target {
            background-color: yellow;
            font-weight: bold;
            padding: 8px;
            border: 1px solid orange;
            margin: 5px 0; /* Some spacing for target elements */
            display: inline-block; /* For buttons and p tags to show background correctly */
        }
        /* For paragraph targets, ensure they take full width if desired or are block */
        p.target {
            display: block;
        }
        button {
            padding: 8px 12px;
            margin: 5px;
            cursor: pointer;
        }
        .reference-point {
            color: navy;
            font-style: italic;
            margin: 15px 0;
            padding: 5px;
            background-color: #e6f3ff;
            border-left: 3px solid navy;
        }
    </style>
</head>
<body>
    <h1>Scroll Arena</h1>
    <p>This page is designed to test scrolling capabilities within the main window and various nested scrollable containers. Find the targets highlighted in yellow.</p>
    <p id="ref_main_top" class="reference-point">Reference: Top of Main Page</p>

    <!-- Section 1: Simple Vertical Scrollbox - 50% width, centered -->
    <h2>Section 1: Vertical Scrollbox (ID: v_scroll_1) - 50% Width, Centered</h2>
    <div class="scrollbox vertical-scroll" id="v_scroll_1" style="width: 50%; margin-left: auto; margin-right: auto;">
        <button>Generic Button Foo</button>
        <p>Top content in Vertical Scrollbox 1.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation.</p>
        <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <button id="target_v1_button_mid" class="target">Target 1: Button Middle (in v_scroll_1)</button>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit.</p>
        <p>Esse cillum dolore eu fugiat nulla pariatur.</p>
        <p>Excepteur sint occaecat cupidatat non proident.</p>
        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Sed ut perspiciatis unde omnis iste natus error.</p>
        <p id="target_v1_p_bottom" class="target">Target 2: Paragraph Bottom (in v_scroll_1)</p>
    </div>

    <div class="placeholder-block" id="main_content_area_1">
        <div>
            <p>Main Page Content Area 1</p>
            <p id="target_main_middle" class="target">Target 3: Div Middle (on Main Page)</p>
        </div>
    </div>
    <p id="ref_main_mid1" class="reference-point">Reference: Middle of Main Page (Zone 1)</p>

    <!-- Section 2: Horizontal Scrollbox - 90% width (as before) -->
    <h2>Section 2: Horizontal Scrollbox (ID: h_scroll_1) - 90% Width</h2>
    <div class="scrollbox horizontal-scroll" id="h_scroll_1">
        <div class="hs-item">Item A</div>
        <div class="hs-item">Item B</div>
        <div class="hs-item">Item C</div>
        <div class="hs-item">Item D</div>
        <div class="hs-item">Item E</div>
        <div id="target_h1_div_mid" class="target">Target 4: Div Middle (in h_scroll_1)</div>
        <div class="hs-item">Item G</div>
        <div class="hs-item">Item H</div>
        <div class="hs-item">Item I</div>
        <div class="hs-item">Item J</div>
        <div class="hs-item">Item K</div>
        <div id="target_h1_div_end" class="target">Target 5: Div End (in h_scroll_1)</div>
    </div>

    <div class="placeholder-block" id="main_content_area_2">Main Page Content Area 2</div>
    <p id="ref_main_mid2" class="reference-point">Reference: Middle of Main Page (Zone 2)</p>

    <!-- Section 3: Nested Scrollboxes - Outer 70% width, centered -->
    <h2>Section 3: Nested Scrollboxes (Outer ID: nested_outer - 70% Width, Centered)</h2>
    <div class="scrollbox vertical-scroll" id="nested_outer" style="height: 300px; background-color: #d0d0d0; width: 70%; margin-left: auto; margin-right: auto;">
        <p>Outer scrollbox: Top content.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p id="target_outer_p_top" class="target">Target 6: Outer Paragraph Top (in nested_outer, before inner)</p>
        <p>Scroll down in this outer container to find the inner one and more content.</p>
        <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
        <p>Consectetur, adipisci velit.</p>

        <div class="scrollbox vertical-scroll" id="nested_inner" style="height: 150px; background-color: #b0b0b0; margin: 15px; border-width: 2px; border-color: #555; width: auto;"> <!-- Inner will be full width of its parent by default -->
            <p>Inner scrollbox: Top content.</p>
            <p>Ut enim ad minim veniam.</p>
            <p>Quis nostrud exercitation ullamco laboris.</p>
            <p id="target_inner_p_mid" class="target">Target 7: Inner Paragraph Middle (in nested_inner)</p>
            <p>Nisi ut aliquip ex ea commodo consequat.</p>
            <p>Duis aute irure dolor in reprehenderit.</p>
            <p>Voluptate velit esse cillum dolore.</p>
            <button id="target_inner_button_bottom" class="target">Target 8: Inner Button Bottom (in nested_inner)</button>
        </div>

        <p>Outer scrollbox: Content after inner box.</p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
        <p>Accusantium doloremque laudantium, totam rem aperiam.</p>
        <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto.</p>
        <p id="target_outer_p_bottom" class="target">Target 9: Outer Paragraph Bottom (in nested_outer, after inner)</p>
    </div>

    <div class="placeholder-block" id="main_content_area_3">Main Page Content Area 3</div>
    <p id="ref_main_almost_bottom" class="reference-point">Reference: Approaching Bottom of Main Page</p>

    <!-- Section 4: Another Vertical Scrollbox (Page Bottom Area) - 60% width, right-aligned -->
    <h2>Section 4: Vertical Scrollbox (Page Bottom Area) (ID: v_scroll_2) - 60% Width, Right-Aligned</h2>
    <div class="scrollbox vertical-scroll" id="v_scroll_2" style="width: 60%; margin-left: auto; margin-right: 0;">
        <p>Top content in Vertical Scrollbox 2.</p>
        <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur.</p>
        <p>Aut odit aut fugit, sed quia consequuntur magni dolores eos.</p>
        <p>Qui ratione voluptatem sequi nesciunt.</p>
        <p>Neque porro quisquam est.</p>
        <p id="target_v2_p_mid" class="target">Target 10: Paragraph Middle (in v_scroll_2)</p>
        <p>Qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
        <p>Sed quia non numquam eius modi tempora incidunt.</p>
        <p>Ut labore et dolore magnam aliquam quaerat voluptatem.</p>
        <p>Ut enim ad minima veniam, quis nostrum exercitationem.</p>
        <p>Ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.</p>
        <p id="target_v2_p_bottom" class="target">Target 11: Paragraph Bottom (in v_scroll_2)</p>
    </div>

    <p id="ref_main_bottom" class="reference-point">Reference: Very Bottom of Main Page Content</p>
    <p style="height: 400px; background-color: #f0f0f0; text-align:center; padding-top: 50px; font-style:italic;">Extra tall content to ensure main page definitely scrolls far down.</p>
    
    <button id="target_main_bottom" class="target" style="display: block; margin: 20px auto; padding: 15px 30px;">Target 12: Button Very Bottom (on Main Page)</button>

    <div style="height: 200px;"></div> <!-- Final spacer -->

</body>
</html>